<template>
    <el-table :data="dataList" row-key="id" style="width: 100%" max-height="250">
        <el-table-column prop="username" label="菜品" />
        <el-table-column prop="ordercount" label="订单数量" />
        <el-table-column prop="ordermoney" label="订单金额" />
        <el-table-column prop="ordersender" label="订单配送费" />
        <el-table-column prop="oredertime" label="下单用时（avg）" />
        <el-table-column fixed="right" label="Operations" min-width="70">
            <template #default="scope">
                <el-button type="primary" size="small" @click.prevent="onListClick(scope)">
                    Order list
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <OrderListDialog v-if="showList" @close="showList = false" />
</template>
<script setup>
import { ref } from 'vue'
import OrderListDialog from './orderListDialog.vue'
const showList = ref(false)

const dataList = ref([
    {
        id: 1,
        username: '菜品1',
        ordercount: '100',
        ordermoney: '100',
        ordersender: '6.00',
        oredertime: '6.00'
    }, {
        id: 1,
        username: '菜品2',
        ordercount: '100',
        ordermoney: '100',
        ordersender: '6.00',
        oredertime: '6.00'
    }, {
        id: 1,
        username: '菜品3',
        ordercount: '100',
        ordermoney: '100',
        ordersender: '6.00',
        oredertime: '6.00'
    }
])
const onListClick = () => {
    showList.value = true
}
</script>